<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col size="84">
        <!-- 表单 -->
        <el-card shadow="never" style="border: none;border-radius: 10px">
          <h3> 认证管理 </h3>
          <el-form :model="form" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                   label-width="68px">
            <el-form-item label="账号" prop="userName">
              <el-input v-model="form.userName" clearable style="width: 200px"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="认证号码" prop="location">
              <el-input v-model="form.number" clearable style="width: 200px"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="认证名称" prop="location">
              <el-input v-model="form.name" clearable style="width: 200px"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="状态" prop="location">
              <el-select v-model="form.statusValue" placeholder="" style="width: 200px">
                <el-option
                    v-for="dict in status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="submit"
                         size="mini"
                         @click="handleQuery">查询
              </el-button>
              <el-button size="mini" @click="reset" class="reset" >重置</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mb8">
          </el-row>
        </el-card>
        <!-- 用户表格 标记管理 -->
        <el-card style="margin-top: 20px;border: none;border-radius: 10px" shadow="never">
          <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center"/>
            <el-table-column label="账号" align="center" key="userId" prop="userId"/>
            <el-table-column label="认证时间" align="center" key="date" prop="date" :show-overflow-tooltip="true"/>
            <el-table-column label="认证号码" align="center" key="markNumber" prop="markNumber" :show-overflow-tooltip="true"/>
            <el-table-column label="认证名称" align="center" key="name" prop="name"/>
            <el-table-column label="状态" align="center" key="status" prop="status" >
              <template slot-scope="scope">
                <span :class="scope.row.status === '未审核' ? 'yellow' : scope.row.status === '审核未通过' ? 'red' :'green'">
                  {{scope.row.status }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="更多" align="center" key="">
              <template slot-scope="scope">
                <el-button size="mini" type="text"
                           @click="handleCommand('handleResetPwd',scope.row)" style="color: #359ED5">详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="userList.length"/>
        </el-card>
      </el-col>
    </el-row>

    <!-- 登录日志 -->
    <el-dialog class="dialog2" title="登录日志" :visible.sync="open" width="1200px" append-to-body>
      <el-table v-loading="loading" :data="conLog" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="时间" align="center" key="date" prop="date" :show-overflow-tooltip="true"/>
        <el-table-column label="版本号" align="center" key="no" prop="no" :show-overflow-tooltip="true"/>
        <el-table-column label="号码库" align="center" key="numberBank" prop="numberBank" width="120"/>
        <el-table-column label="手机品牌" align="center" key="brand" prop="brand" width="120"/>
        <el-table-column label="设备号" align="center" key="numberBank" prop="numberBank" width="120"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {delUser, addUser, updateUser, resetUserPwd} from "@/api/system/user";
import {getToken} from "@/utils/auth";

export default {
  name: "User",
  data() {
    return {
      status:[
        {
          value: '0',
          label: '未审核'
        },
        {
          value: '1',
          label: '审核未通过'
        },
        {
          value: '2',
          label: '审核通过'
        }
      ],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: [
        {
          userId: '12345678910',
          date: '2021-10-25 15:01:50',
          markNumber:'13200001111',
          name: '中国移动',
          status:'未审核'
        },
        {
          userId: '12345678910',
          date: '2021-10-25 15:01:50',
          markNumber:'13200001111',
          name: '中国移动',
          status:'审核未通过'
        },
        {
          userId: '12345678910',
          date: '2021-10-25 15:01:50',
          markNumber:'13200001111',
          name: '中国移动',
          status:'审核通过'
        }
      ],
      // 是否显示弹出层
      open: false,
      // 登录日志
      conLog:[
        {
          date: '2021-10-25 15:01:50',
          no: '1.0.1',
          markNumber: '20240201',
          balance: '5000',
          brand:'华为',

        },
      ],
      // 表单参数
      form: {
        userName: '', // 账号
        number:'',// 认证号码
        name:'',// 认证名称
        statusValue:'',// 认证状态
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单校验
      rules: {
        userName: [
          {required: true, message: "用户名称不能为空", trigger: "blur"},
          {min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur'}
        ],
      }
    };
  },
  created() {
  },
  methods: {
    /** 表单重置 */
    reset() {
      this.form = {
        userName: '', // 账号
        number:'',// 认证号码
        name:'',// 认证名称
        statusValue:'',// 认证状态
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 更多操作触发 */
    handleCommand(command, row) {
      this.open = true
    },
  }
};
</script>
<style lang="scss" scoped>
.active {
  color: #1890ff;
  font-size: 15px;
}

.btn {
  color: #333333;
  font-size: 15px;
}

/* 弹窗样式 */
::v-deep .el-dialog__header{
  background: #F4F4F4 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

::v-deep .el-dialog{
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
</style>
